import React, { useEffect, useState } from 'react'
import Tab from '../../components/Tab'
import axios from 'axios'
import { List } from 'antd-mobile'
import { connect } from 'react-redux'
import { RootState } from '../../store'
import { Dispatch } from 'redux'
import { setList } from '../../store/homeReducer'
const mapState = (state: RootState) => {
	return {
		list: state.homeReducer.list
	}
}

const mapDispath = (dispath: Dispatch) => {
	return {
		dispath
	}
}

type PropsType = ReturnType<typeof mapState> &  ReturnType<typeof mapDispath>

const Index: React.FC<PropsType> = ({ list, dispath }) => {
	useEffect(() => {
		axios.get('/api/list').then(resp => {
			const action = setList(resp.data.data)
			dispath(action)
		})
	})
	return (
		<>
			<List>
				{
					list.length > 0 && list.map(v => {
						return <List.Item 
							key={v.id}
							description={ v.desc }
							prefix={ <img src={ v.url }></img> }
						>{ v.title }</List.Item>
					})
				}
			</List>
		</>
	)
}


export default connect(mapState, mapDispath)(Index)